<template>
    <div class="container" :style="'min-height: '+$docHeight+'px'">
        <div v-if="!showTimeOut&&showCont">
            <div class="headCont">
                <div class="userCont">
                    <div class="userImg">
                        <img src="/img/head.png" />
                    </div>
                    <div class="userInfo">
                        <div class="userName">下午好，明镜止水</div>
                    </div>
                </div>
                <div class="carCont">
                    <div class="carItem">
                        <div class="carNum">0</div>
                        <div class="carName">积分</div>
                    </div>
                    <div class="carItem">
                        <div class="carNum">5.00</div>
                        <div class="carName">余额</div>
                    </div>
                    <div class="carItem">
                        <div class="carNum">1</div>
                        <div class="carName">预约</div>
                    </div>
                </div>
                <div class="vipCont" @click="toVip">
                    <img src="/img/money.png" />
                    <div class="vipInfo">
                    <div class="vipName">余额充值</div>
                    <div class="vipDes">就诊更方便、更便宜～</div>
                    </div>
                    <div class="openBtn" @click="moneyFn">余额充值</div>
                </div>
            </div>
            <div class="creatCar">
                <div class="noInfoName">您还没有就诊卡</div>
                <div class="toSetBtn" @click="addCarFn">+ 立即创建</div>
            </div>
            <div class="listCont">
                <div class="listItem" @click="recordFn">
                    <img src="/img/record.png" >
                    <div>消费记录</div>
                </div>
                <div class="listItem" @click="showTalk = true">
                    <img src="/img/talk.png" >
                    <div>联系客服</div>
                </div>
            </div>
            <div class="underTip">
                <div>技术热线：18483613963</div>
                <div>技术支持：四川省本地鸟科技有限公司</div>
            </div>
            <footcpm></footcpm>
        </div>
        <van-popup v-model:show="showTalk" round position="bottom">
            <div class="maskCont">
                <div class="maskTitle">联系我们</div>
                <div class="talkImg">
                    <img src="/img/erweima.jpg" />
                </div>
                <div class="maskDes textCenter">长按二维码添加客服微信</div>
                <div class="maskDes flexCont bigFont">
                    <div class="iconfont icon-dianhua2"></div>
                    <div>18483613963</div>
                </div>
                <div class="maskDes textCenter">欢迎致电，我们将为您提供帮助！</div>
                <div @click="telFn" class="copyBtn">立即拨号</div>
            </div>
        </van-popup>
    </div>
</template>
<script>
  import footcpm from '@/components/footcpm.vue'

    export default {
        components: {footcpm},
        name:'',
        data() {
            return {
                showTimeOut:false,
                showCont:true,
                showTalk:false,
            }
        },
        props: {},
        setup(){},
        methods:{
            moneyFn(){
                this.$router.push({path:'/money'})
            },
            addCarFn(){
                this.$router.push({path:'/carList'})
            },
            recordFn(){
                this.$router.push({path:'/record'})
            }
        },
        mounted(){},
        created() {},
    }
</script>
<style scoped lang="less">
.container{
    width: 100%;
    padding-bottom: 3rem;
    box-sizing: border-box;
    background-color: #ebf9f3;
    .headCont{
        background-image: linear-gradient(to right bottom, #8ee3be,#5cc78e);
        padding: 0.75rem 4% 0.75rem;
        box-sizing: border-box;
        color: #fff;
        .userCont{
            width: 100%;
            display: flex;
            align-items: center;
            padding: 0.75rem 0;
            .userImg{
                width: 3rem;
                height: 3rem;
                border-radius: 50%;
                border: 3px solid #fff;
                overflow: hidden;
                img{
                    border-radius: 50%;
                    width: 100%;
                }
            }
            .userInfo{
                display: flex;
                align-items: center;
                font-size: 1rem;
                margin-left: 0.75rem;
            }
        }
        .carCont{
            width: 100%;
            background-color: rgb(95, 182, 144);
            padding: 0.75rem;
            box-sizing: border-box;
            border-radius: 0.25rem;
            margin-top: 0.75rem;
            display: flex;
            justify-content: space-between;
            .carItem{
                width: 30%;
                text-align: center;
                font-size: 0.6rem;
                .carNum{
                    font-size: 1rem;
                    margin-bottom: 0.5rem;
                }
            }
        }
        .vipCont{
            width: 100%;
            margin: 0.75rem auto 0;
            background-color:#fff;
            display: flex;
            justify-content: space-between;
            color: #5cc78e;
            padding: 0.5rem 0.75rem;
            box-sizing: border-box;
            border-radius: 0.25rem;
            font-size: 0.6rem;
            align-items: center;
            img{
                height: 2.5rem;
                margin-right: 0.5rem;
            }
            .vipInfo{
            flex: 1;
            width: 1rem;
            margin: 0 0.5rem;
            .vipName{
                font-size: 0.8rem;
                font-weight: bold;
                margin-bottom: 0.25rem;
            }
            }
            .openBtn{
                padding: 0.35rem 1rem;
                box-sizing: border-box;
                border:1px solid #5cc78e;
                color: #5cc78e;
                font-size: 0.6rem;
                border-radius: 0.15rem;
            }
        }
    }
    .creatCar{
        // border: 2px solid #5cc78e;
        width: 92%;
        margin: 1rem auto;
        padding: 0.75rem 4%;
        box-sizing: border-box;
        border-radius: 0.25rem;
        background-color: #fff;
        .noInfoName{
            text-align: center;
            font-size: 0.9rem;
            font-weight: bold;
            padding: 0.75rem 0;
        }
        .toSetBtn{
            padding: 0.75rem 0;
            text-align: center;
            width: 100%;
            margin-top: 0.75rem;
            background-image: linear-gradient(to right bottom, #8ee3be,#5cc78e);
            color: #fff;
            border-radius: 0.25rem;
            font-size: 0.6rem;
        }
    }
    .listCont{
        width: 92%;
        margin: 1rem auto;
        display: flex;
        justify-content: space-between;
        .listItem{
            width: 46%;
            text-align: center;
            padding: 0.75rem;
            box-sizing: border-box;
            background-color: #fff;
            // border: 2px solid #5cc78e;
            border-radius: 0.25rem;
            img{
                width: 50%;
                margin-bottom: 0.5rem;
            }
        }
    }
    .underTip{
        text-align: center;
        margin-top: 2.75rem;
        color: #999;
        font-size: 0.6rem;
        div{
            margin-bottom: 0.25rem;
        }
    }
    .maskCont{
    padding: 0.75rem 4%;
    box-sizing: border-box;
    .maskTitle{
      text-align: center;
      font-size: 0.9rem;
      font-weight: bold;
    }
    .talkImg{
      text-align: center;
      margin: 0.75rem 0;
      img{
        width: 40%;
      }
    }
    .maskDes{
      font-size: 0.65rem;
      margin: 0.75rem 0;
      .redText{
        color:rgb(247, 83, 37);
      }
    }
    .textCenter{
      text-align: center;
    }
    .flexCont{
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .bigFont{
      font-size: 1rem;
      font-weight: bold;
      .iconfont{
        font-size: 1.2rem;
        margin-right: 0.25rem;
      }
    }
    .copyBtn{
      background-color: #5cc78e;
      width: 100%;
      margin-top: 1rem;
      text-align: center;
      padding: 0.75rem 0;
      border-radius: 0.25rem;
      color: #fff;
      font-size: 0.6rem;
    }
    .maskArr{
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .maskArrItem{
        text-align: center;
        width: 48%;
        background-color: #5cc78e;
        // border: 1px solid #ccc;
        border-radius: 0.25rem;
        padding: 0.6rem 0;
        color: #333;
        font-size: 0.65rem;
        margin-bottom: 0.75rem;
        color: #fff;
      }
      .disLink{
        opacity: 0.5;
      }
    }
  }
}
</style>